<template>
  <view>
    <u-sticky>
      <view class="m-head1">
        <image class="bg" mode="widthFix" :src="imageUrl +'list/bg1.png'"></image>
        <u-navbar leftText="选择路内停车场" @rightClick="rightClick" :autoBack="true" placeholder
                  :safeAreaInsetTop="true" :bgColor="bgColor">
        </u-navbar>
        <view class="m-searchp1 m-searchh1 m-searchh2">
          <view class="wp">
            <view class="inner">
              <view class="left">
                <view class="font">宜昌西陵区</view>
                <image :src="imageUrl +'list/arr5.svg'" class="icon" mode="widthFix"></image>
              </view>
              <view class="right" v-if="false">
                <u-search placeholder="快速搜索停车场" bgColor="#F5F6F7" :showAction="false"
                          v-model="keyword"></u-search>
              </view>
            </view>
          </view>
        </view>
      </view>
    </u-sticky>
    <view class="wp">
      <view class="ul-selectm1">
        <view v-for="(item, index) in parkingList" :key="index" class="list-item" @click="selectItem(index)">
          <view class="radio-wrapper">
            <view class="radio" :class="{ active: selectedIndex === index }">
              <view v-if="selectedIndex === index" class="radio-inner">
                <image :src="imageUrl +'list/rad-1.svg'" class="icon" mode="aspectFill"></image>
              </view>
            </view>
          </view>
          <view class="content">
            <view class="title">{{ item.name }}</view>
            <view class="address">
              <image :src="imageUrl +'list/map-point.svg'" class="icon" mode="widthFix"></image>
              <text class="address-text">{{ item.address }}</text>
            </view>
          </view>
          <view class="more-icon">
            <image :src="imageUrl +'list/arr4.svg'" class="icon" mode="widthFix"></image>
          </view>
        </view>
      </view>

    </view>
    <view class="g-ht"></view>
    <view class="g-dwbtn">
      <navigator url="/pages/monthlycard/det" class="g-submit2" :class="{ active: selectedIndex !== -1 }"
                 @click="handleSelect" hover-class="none">
        选择
      </navigator>
    </view>

  </view>
</template>

<script>
export default {
  data() {
    return {
      // 头部背景色
      bgColor: 'transparent',
      selectedIndex: -1, // 当前选中的索引，-1表示未选中
      parkingList: [{
        name: '小太阳充电停车场',
        address: '详细地址详细地址详细地址详细地址...'
      },
        {
          name: '小太阳充电停车场',
          address: '详细地址详细地址详细地址详细地址...'
        },
        {
          name: '小太阳充电停车场',
          address: '详细地址详细地址详细地址详细地址...'
        },
        {
          name: '小太阳充电停车场',
          address: '详细地址详细地址详细地址详细地址...'
        },
        {
          name: '小太阳充电停车场',
          address: '详细地址详细地址详细地址详细地址...'
        },
        {
          name: '小太阳充电停车场',
          address: '详细地址详细地址详细地址详细地址...'
        },
        {
          name: '小太阳充电停车场',
          address: '详细地址详细地址详细地址详细地址...'
        },
        {
          name: '小太阳充电停车场',
          address: '详细地址详细地址详细地址详细地址...'
        },
        {
          name: '小太阳充电停车场',
          address: '详细地址详细地址详细地址详细地址...'
        },
        {
          name: '小太阳充电停车场',
          address: '详细地址详细地址详细地址详细地址...'
        },
      ]

    }
  },
  methods: {
    // 选择项目
    selectItem(index) {
      this.selectedIndex = index
    },

    // 处理选择按钮点击
    handleSelect() {
      if (this.selectedIndex === -1) {
        uni.showToast({
          title: '请先选择一个停车场',
          icon: 'none'
        })
        return
      }

      const selectedParking = this.parkingList[this.selectedIndex]
      // uni.showToast({
      // 	title: `已选择：${selectedParking.name}`,
      // 	icon: 'success'
      // })

      // 这里可以添加后续逻辑，比如跳转页面等
      console.log('选中的停车场：', selectedParking)
    }

  }
}
</script>

<style>
page {
  background-color: #F4FAF7;
}

.m-searchh1 {
  padding-bottom: 0;
}
</style>
